import React, { useState } from "react";
import { Search } from "react-vant";
import Tabber from "../Tabber/Tabber";
import { Space, Badge, Tabs } from "react-vant";
import { ChatO } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";
import { Arrow, Like } from "@react-vant/icons";
import { Card, Image, Button, Toast } from "react-vant";
import "./style.less";
function Home() {
  const [value, setValue] = useState("");
  const navigate = useNavigate();
  const items = Array.from({ length: 3 }, (_, i) => i + 1);
  return (
    <div>
      <div>
        <p>您的位置</p>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <p onClick={() => navigate("/di")} style={{ fontWeight: "bold" }}>
            北京市
          </p>
          <p style={{ marginRight: "20px" }}>
            <Space className="demo-icon" gap={20}>
              <Badge dot onClick={() => navigate("/tong")}>
                <ChatO style={{ fontSize: "30px" }} />
              </Badge>
            </Space>
          </p>
        </div>
        <div>
          <Search
            value={value}
            onChange={setValue}
            align="center"
            placeholder="请输入搜索关键词"
          />
        </div>

        <div>
          <div className="demo-tabs">
            <Tabs border type="capsule">
              {items.map((item) => (
                <Tabs.TabPane
                  key={item}
                  title={item === 1 ? "全部" : item === 2 ? "音乐会" : "展览会"}
                >
                  {item === 1 ? (
                    <div>
                        <p style={{display:'flex',justifyContent:'space-between',margin:'20px 0'}}>
                            <p>即将开展</p>
                            <p onClick={() => navigate("/all")}>查看所有</p>
                        </p>
                      <>
                        <Card round style={{ marginBottom: 20,margin:'0 20px' }}>
                          <Card.Cover
                            onClick={() => Toast.info("点击了Cover区域")}
                          >
                            <Image style={{ width: "100%", height: "300px"}} src="https://img2.baidu.com/it/u=2814429148,2262424695&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1733590800&t=0aaf14b3d9be8bb23ff3da1e4afd3a14" />
                          </Card.Cover>
                          <Card.Header
                            extra={<Arrow />}
                            onClick={() => Toast.info("点击了Header区域")}
                          >
                            封面展示
                          </Card.Header>
                          <Card.Body
                            onClick={() => Toast.info("点击了Body区域")}
                          >
                            卡片内容区域
                          </Card.Body>
                          <Card.Footer>
                            <Space>
                              <Button round size="small">
                                更多
                              </Button>
                              <Button
                                icon={<Like />}
                                round
                                color="linear-gradient(to right, #ff6034, #ee0a24)"
                                size="small"
                              >
                                ￥200
                              </Button>
                            </Space>
                          </Card.Footer>
                        </Card>
                        
                      </>
                    </div>
                  ) : item === 2 ? (
                    <div>音乐会</div>
                  ) : (
                    <div>展览会</div>
                  )}
                </Tabs.TabPane>
              ))}
            </Tabs>
          </div>
        </div>
      </div>

      {/* Tabber */}
      <Tabber></Tabber>
    </div>
  );
}

export default Home;
